<template>
	<div class="list">
		<cl-crud @load="onLoad">
			<template #slot-count="{scope}">
				<div class="filter">
					<p>登录时段：</p>
					<date-picker
						style="width:350px;"
						:datas="datas"
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>

				<div class="count-list">
					<div class="count-item">
						总用户数：<span>{{ totalCount }}</span>
					</div>
					<div class="count-item">
						今日新增数据：<span>{{ todayIncrCount }}</span>
					</div>
					<div class="count-item">
						今日使用人数：<span>{{ todayUseInviteCodeCount }}</span>
					</div>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import moment from 'moment';
import DatePicker from '@/components/order/date-picker';
export default {
	name: 'list',
	components: {
		DatePicker
	},
	data() {
		return {
			todayIncrCount: 0,
			todayUseInviteCodeCount: 0,
			totalCount: 0,
			datas: ['', ''],
			params: {
				sort: 'createTime',
				order: 'desc',
				startTime: moment()
					.hour(0)
					.minute(0)
					.second(0)
					.format('YYYY-MM-DD HH:mm:ss'),
				endTime: moment().format('YYYY-MM-DD HH:mm:ss')
			}
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.system.user)
				.set('dict', {
					api: {
						page: 'inviteLogs'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '用户名',
							prop: 'username',
							align: 'center'
						},
						{
							label: '手机号',
							prop: 'phone',
							align: 'center'
						},
						{
							label: '微信',
							prop: 'wechatNickName',
							align: 'center'
						},
						{
							label: '团队名称',
							prop: 'departmentName',
							align: 'center'
						},
						{
							label: '邀请码',
							prop: 'inviteCode',
							align: 'center'
						},
						{
							label: '邀请人数',
							prop: 'inviteUserCount',
							align: 'center'
						},
						{
							label: '最后登录时间',
							prop: 'loginTime',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: true
						}
					],
					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},
					op: {
						visible: false
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-count', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let { todayIncrCount, todayUseInviteCodeCount, totalCount } = await next(
						params
					);
					this.todayIncrCount = todayIncrCount;
					this.todayUseInviteCodeCount = todayUseInviteCodeCount;
					this.totalCount = totalCount;
				})
				.done();

			if (this.params.order === 'desc') {
				this.params.order = 'DESC';
			}
			if (this.params.order === 'asc') {
				this.params.order = 'ASC';
			}
			app.refresh({
				...this.params
			});
		},
		refresh(params) {
			this.params = {
				...params
			};

			this.crud.refresh(params);
		}
	}
};
</script>

<style lang="stylus" scoped>
.list {
    .count-list {
        display: flex;
        align-items: center;
        margin-left: 20px;
        .count-item {
            margin-right: 20px;
            span {
                color: $main-color;
            }
        }
    }
    .filter {
        display flex
        align-items center
        margin-left 20px
    }
}
</style>
